/**
 * DARK MODE MIXIN
 * 
 * A little wrapper that lets you define your dark mode custom 
 * properties in a way that supports the theme toggle web component
 */
@mixin dark-mode() {
   @media (prefers-color-scheme: dark) {
      :root {
         --color-mode: 'dark';
      }

      :root:not([data-user-color-scheme]) {
         @content;
      }
   }

   [data-user-color-scheme='dark'] {
      @content;
   }
}
